<template>
	<view>
		<text class="secret-info" v-if="transform != 'translateY(0)'">旧浪news制作</text>
		<view class="content" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
			:style="bodyStyle">
			<image src="../../static/icons/icon.png" class="icon"></image>
			<text class="welcome">WELOCOME!!</text>
			<text class="info-register">欢迎加入旧浪News</text>
			<view class="">
				<view class="user-avatar" @click="clickChooseImage">
					<image class="icon" :src="userAvartar" mode=""></image>
					<text class="input-holder">{{avatarUrl}}</text>
					<!-- <input type="text" placeholder="请选择图片上传" placeholder-class="input-holder" value=""> -->
				</view>
				<view class="login-container">
					<input type="text" placeholder="请输入昵称" placeholder-class="input-holder" id="nick" @input="inputGet">
				</view>

				<view class="login-container">
					<input type="text" placeholder="请输入邮箱" placeholder-class="input-holder" id="email"
						@input="inputGet">
				</view>

				<view class="login-container">
					<input type="text" placeholder="请输入用户名" placeholder-class="input-holder" id="user"
						@input="inputGet">
				</view>

				<view class="login-container">
					<input type="pwdValue" placeholder="请输入密码" placeholder-class="input-holder" id="password"
						@input="inputGet">
				</view>


			</view>
			<text class="dialog-btn" @click="clickRegister">注册</text>

		</view>
	</view>

</template>

<script>
	let pointY = 0
	let pic = ""
	export default {
		data() {
			return {
				avatarUrl: "请点击选择图片上传",
				transform: "translateY(0)",
				transition: '',
				userAvartar: "../../static/icons/default_user.png", //用户头像
				nick: "",
				email: "",
				user: "",
				password: ""
			}
		},
		computed: {
			bodyStyle: function() {
				return {
					"transform": this.transform,
					"transition": this.transition
				}
			}
		},
		methods: {
			//数据校验
			checkValid() {
				if (this.nick.length == 0) {
					this.nick = this.user
				}

				if (!this.$utli.checkLength(this.user, 6, "用户名") || !this.$utli.checkLength(this.password, 6, "密码")) {
					return false
				}
				//正则表达式检查电子邮件地址是否合法
				let regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
				if (!regex.test(this.email)) {
					uni.showToast({
						title: "邮箱格式错误",
						icon: 'none'
					});
					return false
				}
				// 判断是否上传头像
				if (this.userAvartar == "") {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					});
					return false
				}

			},
			//注册请求
			clickRegister() {
				//调用方法进行数据校验
				if (this.checkValid()) {
					return
				}
				//请求地址
				let url = this.$params.host + this.$params.action_register
				// 封装数据
				let data = {
					'avatar': pic,
					'email': this.email,
					'nick_name': this.nick,
					'password': this.password,
					'user_name': this.user
				}
				// 发请求
				this.$request.post(url, data, res => {
					console.log(res.data)
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					if (!res.success) {
						return
					}
					// 用户信息封装
					let app = getApp()
					app.globalData.uid = res.data.id
					app.globalData.token = res.data.token
					app.globalData.avatar = res.data.avatar
					app.globalData.type = res.data.type
					app.globalData.nickName = res.data.nickName
					app.globalData.userName = res.data.userName
					app.globalData.email = res.data.email
					//通知
					this.$noti.post(this.$params.noti_login_status)
					// 返回上一页
					uni.navigateBack()
				}, () => {})



			},
			//根据id获取相应输入框数据
			inputGet(event) {
				let id = event.currentTarget.id
				//如果需要将字符串作为变量名，请使用模板字符串将该变量名作为插值，并在外层使用中括号
				this[`${id}`] = event.detail.value
				console.log(this.nick)
				console.log(this.user)
				console.log(this.email)
				console.log(this.password)

			},
			//上传头像
			clickChooseImage() {
				let url = this.$params.host + this.$params.action_upload
				uni.chooseImage({
					success: res => {
						let filePath = res.tempFilePaths[0]
						uni.showLoading({
							title: '上传头像',
							mask: false
						});
						this.$request.postFile(url, 'file', filePath, {}, res => {
							uni.hideLoading()
							// console.log(res);
							let json = JSON.parse(res.data)
							//头像显示处理（显示图片地址和添加服务器路径）
							if (json.success) {
								pic = json.data
								this.userAvartar = this.$params.host + json.data

							}
							console.log(pic)
						})
					}
				})
			},
			touchStart(e) {
				pointY = e.touches[0].clientY
			},
			touchMove(e) {
				let distance = e.touches[0].clientY - pointY
				if (distance > 150) {
					distance = 150
				}
				if (distance < 50) {
					return
				}
				this.transform = `translateY(${distance}rpx)`
				this.transition = ""
			},
			touchEnd(e) {
				this.transform = 'translateY(0)'
				this.transition = 'transform 800ms linear'
			}

		},

	}
</script>

<style>
	@import url('register.css');
</style>
